import React, {Component} from 'react';
import {StyleSheet, Text, Image, View} from 'react-native';
import {Flex, Carousel, WhiteSpace} from '@ant-design/react-native';
import {getAdvertList} from '~/api/advert';

class NoticeView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text_list: [],
        };
        this.setNotice();
    }

    //设置轮播公告栏
    setNotice = () => {
        getAdvertList({
            condidate: {state: 1, m_type: 5, kind: 3, type: 3},
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    text_list: r.data,
                });
            }
        });
    };

    //跳转公告详情页
    onGoNoticePage = (item) => {
        this.props.navigation.push('CarouselInfo', {
            advertid: item.advert_id,
        });
    };

    render() {
        return (
            <>
                {this.state.text_list.length > 0 && (
                    <>
                        <Flex style={styles.noticeView}>
                            <View style={styles.noticeLeft}>
                                <Image style={styles.noticeIcon} source={require('~/assets/shouye/page-gonggao12x.png')} />
                            </View>
                            <View style={styles.noticeRight}>
                                <Carousel style={styles.noticeList} autoplayInterval={4000} dots={false} vertical autoplay infinite>
                                    {this.state.text_list.map((item, index) => (
                                        <View style={styles.laba} key={index}>
                                            <Text onPress={() => this.onGoNoticePage(item)} style={styles.noticeText} numberOfLines={1}>
                                                {item.text}
                                            </Text>
                                        </View>
                                    ))}
                                </Carousel>
                            </View>
                        </Flex>
                        <WhiteSpace />
                    </>
                )}
            </>
        );
    }
}

const styles = StyleSheet.create({
    noticeView: {
        height: 30,
        backgroundColor: 'white',
        borderRadius: 15,
        flexDirection: 'row',
    },
    noticeLeft: {
        marginLeft: 10,
    },
    noticeIcon: {
        width: 12,
        height: 12,
    },
    noticeRight: {
        marginLeft: 10,
        flexGrow: 1,
    },
    noticeList: {
        width: '100%',
        height: 30,
    },
    noticeText: {
        height: '100%',
        fontSize: 11,
        lineHeight: 30,
    },
});

export default NoticeView;
